<template>
	<view class="app">
		<view class="cell b-b">
			<text class="tit fill">赛事名称</text>
			<input class="input" v-model="game.name" type="text" maxlength="15" placeholder="请输入赛事名称" placeholder-class="placeholder">
			<!-- <button class="mini-btn" type="default" plain="true">成绩录入</button> -->
		</view>
		<view class="cell b-b" @click="onShowDatePicker('datetime')">
			<text class="tit fill">开赛时间</text>
			<input class="input" v-model="game.startTime" disabled="false" placeholder="请点选开赛时间" ></input>
		</view>
		<view class="cell b-b" @click="onShowEndTime('datetime')">
			<text class="tit fill">结赛时间</text>
			<input class="input" v-model="game.endTime" disabled="false" placeholder="请点选结赛时间" ></input>
		</view>
		<view class="cell b-b ">
			<text class="tit fill" >比赛类型</text>
			<radio-group @change="radioChange">
				<label>
					<radio value="1" style="transform:scale(0.7)" />重量赛
				</label>
				<label>
					<radio value="2" style="transform:scale(0.7)" />尾数赛
				</label>
			</radio-group>
		</view>
		<!-- <mx-date-picker :show="showPicker" format="yyyy-mm-dd hh:ii" :type="type" :value="value" :top="false" :show-tips="true" :begin-text="'开始时间'" :end-text="'结束时间'" :show-seconds="false" @confirm="onSelected" @cancel="onSelected" />
		 -->
		 <mx-date-picker :show="showPicker" format="yyyy-mm-dd hh:ii" :type="type" :value="startTime" :show-tips="true" :begin-text="'开始时间'" :end-text="'结束时间'" :show-seconds="false" @confirm="onSelected" @cancel="onSelected" />
		 <mx-date-picker :show="endTimePicker" format="yyyy-mm-dd hh:ii" :type="type" :value="endTime" :show-tips="true" :begin-text="'开始时间'" :end-text="'结束时间'" :show-seconds="false" @confirm="onSelectedEndTime" @cancel="onSelectedEndTime" />
		<view class="cell b-b" @click="moveToLocation">
			<text class="tit fill">比赛地点</text>
			<input class="input" v-model="address" name="location"  disabled="false" placeholder="请选择定位 " />
			<text class="mix-icon icon-dizhi"></text>
		</view>
		<view class="cell b-b">
			<text class="tit fill">钓场名称</text>
			<input class="input" v-model="game.fishpondName" type="text" maxlength="15" placeholder="请输入钓场名称" placeholder-class="placeholder">
		</view>
		<view class="cell b-b">
			<text class="tit fill">本场鱼讯</text>
			<input class="input" v-model="game.fishInfo" type="text" maxlength="20" placeholder="鱼种,公斤数" placeholder-class="placeholder">
		</view>
		<!-- <view class="cell b-b ">
			<text class="tit fill" v-show="!game.recycleFish" >回鱼价格</text>
			<input class="input" v-show="!game.recycleFish" v-model="game.recyclePrice" :disabled="game.recycleFish" type="text" maxlength="20" placeholder-class="placeholder">
			<text class="fill " v-show="!game.recycleFish" > 元/斤</text>
			<checkbox-group @click="changeRecycle()">
				<label>
					<checkbox value="game.recycleFish" color="#FFCC33" style="transform:scale(0.7)" />不回鱼
				</label>
			</checkbox-group>
		</view> -->
		<view class="cell b-b ">
			<text class="tit fill">人数上限</text>
			<input class="input" v-model="game.limitUp" type="number" maxlength="20" placeholder-class="placeholder">
			<text >人</text>
		</view>
		<!-- <view class="cell b-b ">
			<text class="tit fill">平台服务费</text>
			<input class="input" v-model="game.entryFee" type="number" maxlength="20"  placeholder-class="placeholder">
			<text class="fill ">元/人</text>
		</view> -->
		<view class="cell b-b ">
			<text class="tit fill">钓场收费</text>
			<input class="input" v-model="game.serviceFee" type="number" maxlength="20"  placeholder-class="placeholder">
			<text >元/人</text>
		</view>
		<!-- <view class="cell b-b ">
			<text class="tit fill">奖金池</text>
			<input class="input" v-model="game.bonus" type="number" maxlength="20"  placeholder-class="placeholder">
			<text >元</text>
		</view> -->
		<view class="cell b-b ">
			<text class="tit fill">联系电话</text>
			<input class="input" v-model="game.phone" type="text" maxlength="20" placeholder="赛事发起人联系电话" placeholder-class="placeholder">
		</view>
		<view class="cell">
			<text class="tit fill">赛场详情</text>
			<!-- <button @click="test()">aaaaaa</button> -->
		</view>
		<view class="cell b-b">
			<!-- <mix-upload-image ref="mixUploadImage2" :images="imagesList2" @onChange="onImageChange2" :length="4"></mix-upload-image> -->
			<mix-upload-image ref="mixUploadImage2"  :imageList="imagesList2" @onChange="onImageChange2" :length="4"></mix-upload-image>
		</view>
		<view class="cell">
			<text class="tit fill">赛制说明</text>
		</view>
		<view class="cell b-b">
			<textarea v-model="game.description" maxlength="-1" placeholder="请输入赛制说明" placeholder-style="color:#999" />
		</view>
		<mix-button ref="confirmBtn" text="点击发布" marginTop="80rpx" @onConfirm="confirm"></mix-button>
	</view>
</template>
<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	
	export default {
		
		components:{
			MxDatePicker,
		},
		data() {
			return {
				game: {
					recycleFish: false
				},
				showPicker: false,
				endTimePicker: false,
				datetime: '',
				type: 'rangetime',
				value: '',
				startTime: '',
				endTime: '',
				location: {},
				address: '',
				imagesList1: [],
				imagesList2: []
			}
		},
		computed: {
		},
		methods: {
			test(){
				console.log("test")
				var item = {
					filePath: 'https://diudiu.51vip.biz/api/upload/minio/view/zhima/QbeMrtrOReJWf025aa87d69b9c59a3eea66d8313ca7f_1616900438164.png',
					url: 'https://diudiu.51vip.biz/api/upload/minio/view/zhima/QbeMrtrOReJWf025aa87d69b9c59a3eea66d8313ca7f_1616900438164.png',
					progress: 100
				}
				this.imagesList2.push(item);
			},
			
			upload(){
				this.$refs.files.upload()
			},
			onShowDatePicker(type){//显示
				this.type = type;
				this.showPicker = true;
				this.startTime = this.game.startTime;
			},
			onShowEndTime(type){//显示
				this.type = type;
				this.endTimePicker = true;
				this.endTime = this.game.endTime;
			},
			onSelected(e) {//选择
				this.showPicker = false;
				if(e) {
					this.game.startTime = e.value;
				}
			},
			onSelectedEndTime(e) {//选择
			console.log("=onSelectedEndTime=")
				this.endTimePicker = false;
				if(e) {
					this.game.endTime = e.value;
				}
			},
			onSelected(e) {//选择
				this.showPicker = false;
				if(e) {
					// this[this.type] = e.value; 
					this.game.startTime = e.value;
					//选择的值
					// console.log('value => '+ e.value);
					//原始的Date对象
					// console.log('date => ' + e.date);
				}
			},
			radioChange: function(evt) {
				// console.log(JSON.stringify(evt.target.value))
				this.game.scoreType = evt.target.value;
			},
			moveToLocation: function() {
				let that = this;
				uni.chooseLocation({
					success: function (res) {
						that.location = res;
						that.address = res.address;
						uni.setStorageSync('selAddress', res);
					},
					fail:function(err){
						// uni.navigateBack({
						// 	delta:1
						// })
					}
				});
			},
			//是否回鱼
			changeRecycle(){
				// console.log(this.game.recycleFish)
				this.game.recycleFish = !this.game.recycleFish;
			},
			async confirm(){
				
				this.game.fishpondAddress = this.location.address;
				this.game.address = this.location.address;
				this.game.latitude = this.location.latitude;
				this.game.longitude = this.location.longitude;
				if(!this.game.name){
					this.$util.msg('请输入赛事名称');
					this.$refs.confirmBtn.stop();
					return;
				}
				if(!this.game.startTime){
					this.$util.msg('请选择开赛时间');
					this.$refs.confirmBtn.stop();
					return;
				}
				if(!this.game.endTime){
					this.$util.msg('请选择结赛时间');
					this.$refs.confirmBtn.stop();
					return;
				}
				if(!this.game.fishpondAddress){
					this.$util.msg('请设置比赛地点');
					this.$refs.confirmBtn.stop();
					return;
				}
				// if(!this.game.entryFee){
				// 	this.$util.msg('请设置报名费用');
				// 	this.$refs.confirmBtn.stop();
				// 	return;
				// }
				const data = this.game
				console.log("==submit data=="+JSON.stringify(data))
				// const res = await this.$request_mock('feedback', 'add', data);
				const res = await this.$post('publish', 'GameAdd', data);
				// console.log("==res data=="+JSON.stringify(res))
				// this.$util.msg(res.msg);
				this.$util.msg("发布成功！");
				this.$refs.confirmBtn.stop();
				setTimeout(()=>{
					// uni.navigateBack();
					uni.switchTab({
						url: '/pages/tabbar/home'
					})
				}, 1000)
			},
			onImageChange1(e){
				// console.log("onImageChange1>>"+JSON.stringify(e));
				this.game.image = e[0].url;
				// console.log("onImageChange this.game.images>>"+this.game.images);
			},
			onImageChange2(e){
				// console.log("onImageChange2>>"+JSON.stringify(e));
				// console.log("onImageChange2 this.game.images>>"+JSON.stringify(this.game.images));
				this.imagesList2 = e;
				var data = '';
				if(e.length > 0){
					this.game.image = e[0].url;
					e.forEach(item=>{
						if(data == ''){
							data += item.url;
						}else{
							data += (","+item.url);
						}
					})
				}
				this.game.images = data;
				// console.log("onImageChange2 this.game.images>>"+JSON.stringify(this.game.images));
			},
		}
	}
</script>

<style scoped lang="scss">
	// .mini-btn {
	// 	width: 110rpx;
	// 	height: 50rpx;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// 	font-size: 20rpx;
	// }
	.app{
		padding-top: 16rpx;
		justify-content: flex-end;
	}
	.cell{
		display: flex;
		align-items: center;
		min-height: 110rpx;
		padding: 0 40rpx;
		
		.desc{
			font-size: 24rpx;
			color: $red;
			margin-left: 10rpx;
		}
		&:first-child{
			margin-bottom: 10rpx;
		}
		&:after{
			left: 40rpx;
			right: 40rpx;
			border-color: #d8d8d8;
		}
		.tit{
			font-size: 30rpx;
			color: #333;
		}
		.avatar-wrap{
			width: 120rpx;
			height: 120rpx;
			position: relative;
			border-radius: 100rpx;
			overflow: hidden;
			
			.avatar{
				width: 100%;
				height: 100%;
				border-radius: 100rpx;
			}
			.progress{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 100rpx;
				height: 100rpx;
				box-shadow: rgba(0,0,0,.6) 0px 0px 0px 2005px;
				border-radius: 100rpx;
				transition: .5s;
				opacity: 0;
				
				&.no-transtion{
					transition: 0s;
				}
				&.show{
					opacity: 1;
				}
			}
		}
		.input{
			flex: 1;
			text-align: right;
			font-size: 28rpx;
			color: #333;
			// background-color: #F7F7F7;
			
		}
		switch{
			margin: 0;
			transform: scale(0.8) translateX(10rpx);
			transform-origin: center right;
		}
		.tip{
			margin-left: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
		.checkbox{
			padding: 12rpx 0 12rpx 40rpx;
			font-size: 28rpx;
			color: #333;
			
			.mix-icon{
				margin-right: 12rpx;
				font-size: 36rpx;
				color: #ccc;
			}
			.icon-xuanzhong{
				color: $base-color;
			}
		}
	}
</style>
